/*
 * @Date: 2025-05-06 15:17:20
 * @LastEditors: lyx
 * @LastEditTime: 2025-05-06 15:26:44
 * @FilePath: \tpt-cnpc\src\components\VoiceBlock\index.tsx
 * @Description: 
 */
import React, { useContext, useMemo } from 'react'
import { MicrophoneFace } from '@/components/Icons'
import VoiceAnimated from '../VoiceAnimated'
import './index.less'

import voiceDark from '../../assets/chat/voiceDark.png'
import voiceEnterDark from '../../assets/chat/voiceEnterDark.png'
import voiceBgDark from '../../assets/chat/voiceBgDark.png'

interface IProps {
    voiceStatus: 'init' | 'start' | 'load' | 'end'
}

const VoiceWrap: React.FC<IProps> = ({
    voiceStatus
}) => {
    const imgMap = useMemo(() => {
        let voiceImgUrl = voiceDark
        if (voiceStatus === 'start') {
            voiceImgUrl = voiceEnterDark
        }
        return {
            bg: voiceBgDark,
            voice: voiceImgUrl,
        }
    }, [voiceStatus]);

    return (
        <div className={`chat-voice-wrap  ${voiceStatus === 'start' ? 'chat-voice-wrap-start' : ''} ${voiceStatus === 'load' ? 'chat-voice-wrap-load' : ''}`}>
            <img className='chat-voice-bg' src={imgMap.bg} alt="" />
            <div className='chat-voice-block'>
                <div className='chat-voice-content'>
                    {
                        voiceStatus === 'start' ? <VoiceAnimated></VoiceAnimated> : <MicrophoneFace></MicrophoneFace>
                    }
                </div>
            </div>
        </div>
    )
}

export default VoiceWrap
